<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .map {
      width: 1000px;
      height: 600px;
      border: 5px solid #333;
      margin: 50px auto;
      position: relative;

      background-image: url(./imgs/bg.png);
      background-repeat: repeat;
      background-size: 20px 20px;
    }

    .map > div {
      width: 20px;
      height: 20px;
      position: absolute;
      background-size: 20px 20px;
      background-repeat: no-repeat;
    }

    .map > .food {
      background-image: url(./imgs/food.png);
    }

    .map > .head {
      background-image: url(./imgs/head.png);
    }

    .map > .body {
      background-image: url(./imgs/body.png);
    }

  </style>

</head>
<body>


  <button>开始</button>
  <button>暂停</button>
  <button>重新开始</button>
  <p>0</p>
  <div class="map" id="map"></div>
  <script type="module">
      // import Food from './food.js';
      // import Snake from './snake.js';


      // const myfood = new Food('#map');
      // const snake = new Snake('#map');
      import Game from './game.js';

      const game = new Game('#map','p');

      // 获取按钮  调用游戏规则类的方法
      document.querySelector('button:nth-child(1)').onclick = function(){
        game.start()
      }

      document.querySelector('button:nth-child(2)').onclick = function(){
        game.pause()
      }

      document.querySelector('button:nth-child(3)').onclick = function(){
        game.restart()
      }

      document.addEventListener('keydown',e=>{
          // alert(e.keyCode)
          // 37  65  左 
          // 39  68  右 
          // 38  87  上 
          // 40  83  下 
          // 13  开始 
          // 32  暂停
          switch(e.keyCode){
             case 37:
             case 65:
                game.changeDir('left');
                break;

             case 39:
             case 68:
                game.changeDir('right');
                break;
             case 38:
             case 87:
                game.changeDir('top');
                break;
             case 40:
             case 83:
                game.changeDir('bottom');
                break;

             case 13:
                game.start();
                break
             case 32:
                game.pause();
                break;
             
          }


      })
      

  </script>
  
  <script>
    // 多个配合  分工明确 

    // 食物类  

    // 随机生成一个食物 
    // 随机出现在地图的任意位置 
    // 等一个信号  下个位置出现食物 

    // 蛇类 

    // 负责生成一条蛇 
    // 蛇走一步 游戏规则决定 每隔多长时间走一步  
    // 吃食物  (蛇头和食物重合)
    // 判断蛇头是否出界  

    // 游戏规则 

    // 通知食物出现在 地图上 
    // 通知蛇出现在地图上 

    // 开始游戏  通知蛇每隔多长时间走一步 
    // 暂停游戏  通知蛇停下来 
    // 重新开始  重新初始化  
    // 接收用户的按键  调整前后左右


  </script>

</body>

</html>